import React, { useEffect, useState } from 'react'
import { Table, Button, Modal, message, Popconfirm } from 'antd';
import { ToolOutlined, DeleteOutlined } from '@ant-design/icons'
import NewDepartment from '../../components/StaffManage/DepartmentSettings/newDepartment';
import UpdateDepartment from '../../components/StaffManage/DepartmentSettings/UpdateDepartment';
import { inject, observer } from 'mobx-react'
import '../../assets/css/DepartmentSettings.css'
import Service from '../../service';
function DepartmentSettings(props) {
    const [isAddModalVisible, setisAddModalVisible] = useState(false);
    const [isUpdateModalVisible, setisUpdateModalVisible] = useState(false);
    const [modalTask, setModalTask] = useState();
    const [data, setData] = useState([])
    const showModal = (data) => {
        switch (data.state) {
            case 'add':
                setisAddModalVisible(true);
                break;
            case 'update':
                setModalTask(data.data)
                setisUpdateModalVisible(true);
                break;
            default:
                break;
        }
    };

    const handleOk = async (data) => {
        console.log(data);
        switch (data) {
            case 'add':
                const dept_name = props.departmentSettingsStore.value
                const result = await Service.StaffManage.DepartmentSettings.addList({ dept_title: dept_name })
                if (result.code === 200) { message.success('添加成功') }
                props.departmentSettingsStore.setValue('')
                freshList()
                setisAddModalVisible(false);
                break;
            case 'update':
                const dept_id = props.departmentSettingsStore.upId
                const dept_title = props.departmentSettingsStore.title
                console.log({ dept_id, dept_title });
                const res = await Service.StaffManage.DepartmentSettings.upList({ dept_id, dept_title })
                if (res.code === 200) { message.success('修改成功') }
                props.departmentSettingsStore.setTitle('')
                freshList()
                setisUpdateModalVisible(false);
                break;
            default:
                break;
        }
    };

    const handleCancel = (data) => {
        switch (data) {
            case 'add':
                setisAddModalVisible(false);
                break;
            case 'update':
                setisUpdateModalVisible(false);
                break;
            default:
                break;
        }
    };
    const delDepartment = async (record) => {
        console.log(record);

    };

    const confirm = async (e) => {
        const dept_id = e.dept_id
        console.log(dept_id);
        const res = await Service.StaffManage.DepartmentSettings.delList({ dept_id: dept_id })
        if (res.code === 200) message.success('删除成功');
        freshList()
    };

    const cancel = (e) => {
        message.error('取消删除');
    };
    const columns = [
        {
            title: <strong>部门名称</strong>,
            dataIndex: 'dept_title',
            key: 'id',
            width: 2400,
            render: (text) => <a >{text}</a>,
        },
        {
            title: <strong>管理</strong>,
            // onHeaderCell: () => ({ style: { textAlign: 'center' } }),
            dataIndex: 'id',
            key: 'id',
            align: 'center',
            render: (text, record) =>
                <div style={{ minWidth: '150px' }}>
                    <Button onClick={() => showModal({ state: 'update', data: record })} style={{ backgroundColor: '#5596cd', color: 'white' }} size='small' ><ToolOutlined /> 修改</Button>
                    <Popconfirm
                        title={`确定删除${record.dept_title}吗?`}
                        onConfirm={() => confirm(record)}
                        onCancel={cancel}
                        okText="是"
                        cancelText="否"
                    >
                        <Button onClick={() => delDepartment(record)} style={{ backgroundColor: '#f52e31', color: 'white' }} size='small'><DeleteOutlined />删除</Button>
                    </Popconfirm>
                </div>

        },
    ];

    const freshList = () => {
        Service.StaffManage.DepartmentSettings.freshList().then((res) => {
            console.log(res);
            setData(res.data.map((item) => {
                item.key = item.dept_id;
                return item;
            }))
        })
    }
    useEffect(() => {
        freshList()
    }, [])
    return (
        <div>
            <div className='depart_up'>
                <Button onClick={freshList}>所有部门</Button>
                <Button onClick={() => showModal({ state: 'add' })}>新增部门</Button>
            </div>
            <Modal okText="保存" cancelText="取消" title="新增部门" visible={isAddModalVisible} onOk={() => handleOk('add')} onCancel={() => handleCancel('add')}>
                <NewDepartment />
            </Modal>
            <Modal okText="保存" cancelText="取消" title="修改部门" visible={isUpdateModalVisible} onOk={() => handleOk('update')} onCancel={() => handleCancel('update')}>
                <UpdateDepartment modalTask={modalTask} />
            </Modal>
            <Table pagination={false} bordered={true} columns={columns} dataSource={data} className="depart_table" />
        </div>
    )
}

export default inject('departmentSettingsStore')(observer(DepartmentSettings))